import React from 'react';
import { Modal, Row, Col, Typography, Tag } from 'antd';
import { connect } from 'umi';
import moment from 'moment';
import { getQualityTag, getHour } from '../../utils';
import styles from './style.less';

const getColor = data => {
    if (data) {
        if (data.indexOf('正常') > -1) {
            return 'green';
        }
        return 'red';
    }
    return '';
};

const Detail = ({ visible, data = {}, ...restProps }) => {
    const rt = getQualityTag(data.evalRank);
    return (
        <Modal visible={visible} footer={null} {...restProps} onCancel={restProps.onClose} width={700}>
            <h2 style={{ textAlign: 'center' }}>
                <Typography.Paragraph ellipsis>{data.taskName}</Typography.Paragraph>
            </h2>
            <div className={styles.wrap}>
                <div className={styles.header}>
                    <Row gutter={8}>
                        <Col span={3} className={styles.title}>
                            任务ID：
                        </Col>
                        <Col span={9}>
                            <Typography.Paragraph ellipsis>{data.taskNo}</Typography.Paragraph>
                        </Col>
                        <Col span={3} className={styles.title}>
                            公司：
                        </Col>
                        <Col span={9}>
                            <Typography.Paragraph ellipsis>{data.companyName}</Typography.Paragraph>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={3} className={styles.title}>
                            任务类型：
                        </Col>
                        <Col span={9}>
                            <Typography.Paragraph ellipsis>{data.taskType}</Typography.Paragraph>
                        </Col>
                        <Col span={3} className={styles.title}>
                            责任人：
                        </Col>
                        <Col span={9}>
                            <Typography.Paragraph ellipsis>{data.employeeName}</Typography.Paragraph>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={3} className={styles.title}>
                            产品线：
                        </Col>
                        <Col span={9}>
                            <Typography.Paragraph ellipsis>{data.productName}</Typography.Paragraph>
                        </Col>
                        <Col span={3} className={styles.title}>
                            项目组：
                        </Col>
                        <Col span={9}>
                            <Typography.Paragraph ellipsis>{data.projectGroupName}</Typography.Paragraph>
                        </Col>
                    </Row>
                </div>

                <div className={styles.content}>
                    <Row gutter={8}>
                        <Col span={4} className={styles.title}>
                            计划开始时间：
                        </Col>
                        <Col span={8}>
                            <Typography.Paragraph ellipsis>
                                {moment(data.planStartDate).format('YYYY-MM-DD')}
                            </Typography.Paragraph>
                        </Col>
                        <Col span={4} className={styles.title}>
                            计划完成时间：
                        </Col>
                        <Col span={6}>
                            <Typography.Paragraph ellipsis>
                                {moment(data.planEndDate).format('YYYY-MM-DD')}
                            </Typography.Paragraph>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={4} className={styles.title}>
                            实际开始时间：
                        </Col>
                        <Col span={8}>
                            <Typography.Paragraph ellipsis>
                                {data.actualStartDate && moment(data.actualStartDate).format('YYYY-MM-DD')}
                            </Typography.Paragraph>
                        </Col>
                        <Col span={4} className={styles.title}>
                            实际完成时间：
                        </Col>
                        <Col span={8}>
                            <Typography.Paragraph ellipsis>
                                {data.actualEndDate && moment(data.actualEndDate).format('YYYY-MM-DD')}
                            </Typography.Paragraph>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={4} className={styles.title}>
                            计划工作量：
                        </Col>
                        <Col span={8}>
                            <Typography.Paragraph ellipsis>{`${getHour(
                                data.orginEstimateMinute
                            )} 小时`}</Typography.Paragraph>
                        </Col>
                        <Col span={4} className={styles.title}>
                            实际工作量：
                        </Col>
                        <Col span={8}>
                            <Typography.Paragraph ellipsis> {`${getHour(data.spentMinute)} 小时`}</Typography.Paragraph>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={4} className={styles.title}>
                            任务质量：
                        </Col>
                        <Col span={8}>
                            {data.evalScore} <Tag color={rt.color}>{rt.label}</Tag>
                        </Col>
                        <Col span={4} className={styles.title}>
                            完成状态：
                        </Col>
                        <Col span={8}>
                            {data.taskStatus}
                            <Tag
                                color={getColor(data.taskCompleteStatus)}
                                style={{ borderStyle: 'dashed', marginLeft: 5 }}
                            >
                                {data.taskCompleteStatus}
                            </Tag>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={4} className={styles.title}>
                            任务链接：
                        </Col>
                        <Col span={20}>
                            <a
                                href={`http://jira.vv.cn:8000/browse/${data.taskNo}`}
                            >{`http://jira.vv.cn:8000/browse/${data.taskNo}`}</a>
                        </Col>
                    </Row>
                </div>
            </div>
        </Modal>
    );
};

export default connect()(Detail);
